Example: Responsive Design
Product: CODESYS Visualization
The sample project shows how to create a visualization so that it reacts to the size properties of the end device used.
Description
The visualization loads different visualizations depending on the screen size of the calling device. As a result, it is possible to optimize the design for monitors, tablets, and smartphones.
Additional information
Application: ResponsiveInPage
The example shows how to use the ISizeProvider interface from the VisuElems library to responsively create a visualization in a single object.
In the IsPortrait function, it is determined whether the layout is a portrait or landscape.
For more information, see: Using Responsive Design
Application: ResponsiveSeveralPages
In the PLC_PRG program, the ClientManagerListener function block is registered at the global ClientManager. In the SetStartVisu function, the visualization is set depending on the screen size of the client. This function is called by the StartVisualizationSet method of the ClientManagerListener.
 |
 |
 |
You can use a web browser to test the sample project by resizing the browser and reloading the page.
System requirements and restrictions
Programming system | CODESYS Development System (version 3.5.18.0 or higher) |
Runtime system | CODESYS Control Win (version 3.5.18.0 or higher) |
Add-on | CODESYS Visualization (version 4.7.0.0 or higher) |
Add-on components | - |
Note
DOWNLOAD Project